<template>
  <div class="search-config">
    <div class="config-item" v-for="(item, index) in configList" :key="index">
      <div class="config-item_bar">
        <!-- 条件label -->
        <div class="input-box">
          <el-input v-model="item.name" disabled></el-input>
        </div>
        <!-- 区域 省市区 -->
        <div class="select-box" v-if="item.type == 'area'">
          <el-tree-select v-model="item.value" :data="areaOptions" :props="areaProps" check-strictly default-expand-all
            filterable clearable />
        </div>
        <!-- 日期 选项 -->
        <div class="select-box" v-if="item.type == 'date'">
          <el-select v-model="item.value" placeholder="请选择" filterable clearable="">
            <el-option v-for="item in dateOptions" :label="item.label" :value="item.value" :key="item.value" />
          </el-select>
        </div>
        <!-- 客流数 选项 -->
        <div class="num-box" v-if="item.type == 'num'">
          <div class="num-box_select">
            <el-select v-model="item.than" placeholder="请选择" filterable clearable="">
              <el-option v-for="item in thanOptions" :label="item.label" :value="item.value" :key="item.value" />
            </el-select>
          </div>
          <div class="num-box_input">
            <el-input v-model="item.num" type="number" />
          </div>
        </div>
        <img src="@/assets/images/close-report.svg" class="close-report_icon">
      </div>
      <!-- 关系条件 -->
      <div class="link-box" v-if="index != configList.length - 1">
        <el-select filterable clearable v-model="item.link">
          <el-option v-for="item in linkOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup lang="js">
import { ref, onMounted } from "vue"
import { selectAreaOptions } from "@/api/layout/header/search"
import { buildTree } from "@/utils/tool"

// 区域选项
const areaOptions = ref([])

const areaProps = {
  label: "name",
  value: "districtId",
}

// 关系选项
const linkOptions = [
  { value: "and", label: "与" },
  { value: "or", label: "或" }
]

// 日期选项
const dateOptions = [
  { value: "day", label: "近7天" },
  { value: "month", label: "近1个月" }
]

// 大于 等于 小于
const thanOptions = [
  { value: "greater", label: "大于" },
  { value: "equal", label: "等于" },
  { value: "less", label: "小于" },
]

// 配置数组
const configList = ref([
  { name: "区域", link: "or", type: "area", value: "220102", num: "", than: "" },
  { name: "日期", link: "and", type: "date", value: "day", num: "", than: "" },
  { name: "客流数", link: "", type: "num", value: 1, num: 1, than: "equal" },
])

onMounted(() => {
  initAreaOptions()
})

// 初始化省市区/景区字典
const initAreaOptions = () => {
  selectAreaOptions().then((res) => {
    let list = res.data
    if (list.length !== 0) {
      // 省市区字典
      areaOptions.value = buildTree(list)
    }
  })
}

</script>
<style scoped lang="scss">
.search-config {
  display: flex;
  flex-wrap: wrap;

  .config-item {
    display: flex;
    align-items: center;
    margin-bottom: vh(15);

    .config-item_bar {
      background: rgba(15, 52, 72, 0.55);
      border-radius: vw(10);
      padding: vh(11) vw(20);
      display: flex;
      align-items: center;

      .input-box {
        width: vw(75);
      }

      .select-box {
        width: vw(117);
        margin-left: vw(20);
      }

      .num-box {
        display: flex;
        align-items: center;
        margin-left: vw(20);

        .num-box_select {
          width: vw(90);
          margin-right: vw(20);
        }

        .num-box_input {
          width: vw(80);
        }
      }

      .close-report_icon {
        width: vw(19);
        margin-left: vw(20);
        cursor: pointer;
      }
    }

    .link-box {
      width: vw(70);
      margin: 0 vw(20);
    }
  }

}
</style>